<template>
    <div class="content">
        <!--头部搜索框-->
        <van-row justify="space-between">
            <van-col span="3">
                <img src="@/assets/mi.png" alt="" width="42px" height="42px" class="logo">
            </van-col>
            <van-col span="18">
                <van-search v-model="value" placeholder="搜索商品的名称" background="#f1f0f0" />
            </van-col>
            <van-col span="3">
                <button class="search">
                    <van-icon name="contact" size="25" />
                </button>
            </van-col>
        </van-row>
        <!--导航栏-->
        <van-tabs v-model:active="active" title-active-color="#ff690b" color="#ff690b">
            <template v-for="item in tabsname">
                <van-tab :title="item.name"></van-tab>
            </template>
        </van-tabs>
        <div class="swipe">
            <!--遍历sections的数组数据-->
            <template v-for="item in images">
                <div v-if="item.view_type =='gallery' && item.body.items">
                    <!-- <div v-for="items in item.body.items"> -->
                    <!--轮播图-->
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="items in item.body.items">
                            <img :src="items.img_url" alt="" width="100%" height="200px">
                        </van-swipe-item>
                    </van-swipe>
                    <!-- </div> -->
                </div>
            </template>
        </div>
        <!--快捷菜单入口-->
        <div class="auto_fill">
            <div v-for="item in photoList">
                <van-grid :column-num="5" icon-size="60px">
                    <van-grid-item v-for="items in item.items" border="false" :icon="items.img_url"
                        :url="items.action.path" />
                </van-grid>
            </div>
            <div v-for="item in photoList2">
                <van-grid :column-num="5" icon-size="60px">
                    <van-grid-item v-for="items in item.items" :icon="items.img_url" :url="items.action.path" />
                </van-grid>
            </div>

        </div>
        <!--商品模块-->
        <div class="products">
            <template v-for="item in productList">
                <van-image width="11rem" height="11rem" fit="cover" position="center" :src="item.img_url"
                    style="margin-left: 20px;">
                    <div class="info">
                        <div class="name">{{ item.product_name }}</div>
                        <div class="brief">{{ item.product_brief }}</div>
                        <div class="price" style="color: #f06f6f; font-size: 18px;">￥{{ item.product_price }}起</div>
                        <van-action-bar-button type="danger" text="立即购买" @click="onClickButton(item.action.path)" />
                    </div>
                </van-image>
            </template>
        </div>
        <!--更多小米手机-->
        <div v-for="phone in moreXiaoMi" class="phones">
            <a :href="phone.action.path">{{ phone.action_title }}</a>
            <van-icon name="arrow" style="line-height: 50px;" />
        </div>
        <!--小米笔记本-->
        <div v-for="notebook in miNoteBook" class="notbooks">
            <a :href="getnotebooklink(notebook)">
                <img :src="notebook.img_url" alt="" width="100%" height="300px">
            </a>
        </div>
        <!--更多小米笔记本-->
        <div v-for="book in moreBook" class="mbook">
            <a :href="getmoreBookLink(book)">{{ book.action_title }}</a>
            <van-icon name="arrow" style="line-height: 50px;" />
        </div>
    </div>

    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o">分类 </van-tabbar-item>
        <van-tabbar-item icon="friends">米圈</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script  lang="ts" setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
const active = ref(0);
const value = ref('')
// 标签导航栏
const tabsname = ref()
//轮播的赋值
const images = ref()
//快捷入口图标
const photoList = ref()
const photoList2 = ref()
// 商品信息
const productList = ref()
// 更多小米手机
const moreXiaoMi = ref()
//小米笔记本
const miNoteBook = ref()
//更多小米笔记本
const moreBook =ref()

onMounted(() => {
    callpagetableapi()
})

const callpagetableapi = async () => { 
    //使用axios
    axios({
        url: 'https://apis.netstart.cn/xmsc/home/page',
        method:'get'
    }).then((res) => { 
        console.log(res);
        tabsname.value = res.data.data.tabs
        images.value = res.data.data.data.sections
        // console.log(images.value);
        photoList.value = res.data.data.data.sections[1]
        photoList2.value = res.data.data.data.sections[2]
        //商品信息
        productList.value = res.data.data.data.sections[4].body.items
        console.log(productList.value);
        moreXiaoMi.value = res.data.data.data.sections[8].body.items
        miNoteBook.value = res.data.data.data.sections[10].body.items
        moreBook.value = res.data.data.data.sections[12].body.items

    })
}
// 立即购买
const onClickButton = (path:any) => {
    window.location.href ="https://m.mi.com/commodity/detail/"+path
};
//a 连接外部函数定义
const getnotebooklink = (item:any) => {
    return "https://m.mi.com/commodity/detail/"+item.action.path;
}
const getmoreBookLink = (item:any) => {
    return "https://m.mi.com/commodity/detail/"+item.action.path;
}
</script>
<style scoped>
.content{
    background-color: rgb(241, 240, 240);
    height: 100vh;
    .search{
        text-align: center;
        margin-top: 11px;
        margin-right: 5px;
    }
    .logo{
        margin-top: 8px;
        margin-left: 5px;
    }
}
 .my-swipe .van-swipe-item {
     color: #fff;
     font-size: 20px;
     line-height: 15px;
     text-align: center;
    
 }
 .van-image .info{
    margin-left: 5px;
    justify-content: center;
    text-align: center;
    margin-top: 4px;
 }
 .info .brief{
    white-space: nowrap;
    /*超出部分隐藏*/
    overflow: hidden;
    /*文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
    color: #a5a5ab;
    font-size: 15px;
 }
 .info .name{
    font-size: 18px;
    font-weight: 700;
 }
 .info .van-button{
    width: 100px;
    border-radius: 6px;
    margin-bottom: 15px;
 }
 /* 更多小米手机 */
 .phones{
    height: 50px;
    margin-top: 30px;
    justify-content: center;
    text-align: center;
    background-color: white;
    margin-bottom: 5px;
    a{
        line-height: 50px;
        color: #a5a5ab;
        font-size: 18px;
    }
 }
 .mbook{
    margin-bottom: 60px;
    height: 50px;
        margin-top: 7px;
        justify-content: center;
        text-align: center;
        background-color: white;
        a {
            line-height: 50px;
            color: #a5a5ab;
            font-size: 18px;
        }
 }
</style>